import TopNav from "../../components/TopNav/TopNav";
import "./project.css";
import axios from "axios";
import FilterDrawer from "../../components/FilterDrawer";
import TaskModal from "../../components/TaskModal/TaskModal";
import React, { useState, useEffect } from "react";
import { useNavigate } from "react-router";
import { Popup, Cell, Button } from "react-vant";

const Project = () => {
  const [visible, setVisible] = useState(false);
  const [showModal, setShowModal] = useState(false);
  const handleSubmit = (formData) => {
    console.log("提交的表单数据:", formData);
    // 处理表单提交逻辑
  };

  // 新增项目数据state
  const [tasks, setTasks] = useState([]);
  const navigate = useNavigate(); // 新增任务数据state
  // 获取任务数据
  const fetchTasks = async () => {
    try {
      const response = await axios.get("http://192.168.0.154:3000/my/list");
      setTasks(response.data);
      console.log(response.data);
    } catch (error) {
      console.error("获取任务数据失败:", error);
    }
  };
  useEffect(() => {
    fetchTasks();
    const interval = setInterval(() => {
      fetchTasks(); // 定期获取数据
    }, 1000); // 每5秒请求一次数据，您可以根据需要调整时间

    return () => clearInterval(interval); // 清除定时器
  }, []);
  const [showFilter, setShowFilter] = useState(false);
  return (
    <div>
      <TopNav />
      <div className="project-container">
        <div className="project-title">项目</div>
        <div className="project-list">
          <div
            style={{
              width: "4px",
              height: "80px",
              background: "rgb(24, 144, 255)",
              borderRadius: "2px",
              position: "absolute",
              left: "0",
              top: "12px",
            }}
          ></div>
          <div className="project-item">PN0001245</div>
          <div className="project-item-title">医疗应用App (iOS 原生)</div>
          <div
            className="project-item-content"
            onClick={() => navigate("/detail")}
          >
            查看详情
          </div>
        </div>

        <div className="task-list">任务列表</div>
        {/* <div className="task-item" onClick={() => setVisible(true)}>
          <img src="" alt="" />
        </div> */}
        <div>
          <Button
            onClick={() => setShowFilter(true)}
            className="task-item"
          ></Button>

          <FilterDrawer
            visible={showFilter}
            onClose={() => setShowFilter(false)}
          />
        </div>

        <div className="task-item-title">当前任务</div>
        <div
          className="task-item-content-list"
          onClick={() => navigate("/taskdetail")}
        >
          {tasks.map((task) => (
            <div className="task-card" key={task.id}>
              <div>任务列表</div>
              <div className="task-header">
                <span className="task-title">{task.title}</span>
                <div
                  className={`task-status ${
                    task.status === "已完成" ? "completed" : "in-progress"
                  }`}
                >
                  {task.status}
                </div>
              </div>

              <div className="task-info">
                <div className="task-time">
                  <div className="time-item">
                    <span className="label">预估时间</span>
                    <span className="value">{task.yugu}</span>
                  </div>
                  <div className="time-item">
                    <span className="label">花费时间</span>
                    <span className="value">{task.time}</span>
                  </div>
                  <div className="assignee">
                    <span className="label">执行人</span>
                    <div className="avatar-wrapper">
                      <img src={task.img} alt="" className="avatar" />
                    </div>
                  </div>
                </div>
                <div className="priority-level">
                  <span
                    className={`priority ${
                      task.priority === "高"
                        ? "high"
                        : task.priority === "中"
                        ? "medium"
                        : "low"
                    }`}
                  >
                    {task.priority === "高"
                      ? "↑"
                      : task.priority === "中"
                      ? "→"
                      : "↓"}
                  </span>
                </div>
              </div>
            </div>
          ))}
        </div>
        <div>
          <div
            className="task-item-content-add"
            onClick={() => setShowModal(true)}
          >
            +
          </div>
          {showModal && (
            <TaskModal
              onClose={() => setShowModal(false)}
              onSubmit={handleSubmit}
            />
          )}
        </div>
      </div>
    </div>
  );
};

export default Project;
